<template>
  <s-layout :tabbarshow="false" navbar="normal" :autoBack="true" leftIconColor="#fff">
    <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/loginbg.png)`, }">
      <view class="top">
      <view class="title">欢迎来到中远直聘</view>
      <text>安全便捷，真实有效</text>
      </view>
      <view class="middle">
      <view class="form-box flex">
        <view class="name" v-for="(item,index) in subTypes" :key="index"
        @click="activeIndex = index"
        :class="{ 'active': activeIndex === index }"
        >{{ item.name }}</view>
    
      </view>
      <view class="content">
        <codelogin  v-if="activeIndex === 0" :agreeStatus="state.protocol" @onConfirm="onConfirm"/>
        <accountLogin v-if="activeIndex === 1" :agreeStatus="state.protocol" @onConfirm="onConfirm"/>
        <button class="WXsubmit submit" @tap="thirdLogin('wechat')"> 微信快捷登录 </button>
        <!-- <s-button @netWork="thirdLogin('wechat')" :text="text"></s-button> -->
        <!-- 勾选相关协议 -->
        <view class="agreement " :class="{ shake: currentProtocol }">
          <label class="radio" @tap="onChange">
            <radio @tap.stop="onChange" :checked="state.protocol" class="is-checked" style="transform:scale(0.6)"
              color="#0038F7" />
            <view>我已阅读并遵守<text @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)">
                《{{ appInfo.user_protocol.title }}》</text>和<text @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)">
                《{{ appInfo.privacy_protocol.title }}》</text></view>
          </label>
        </view>
      </view>
      
      </view>
    </view>
    <u-popup :show="popupshow" mode="bottom"  :round="16" >
      <mpAuthorization  @closepop="closepop"/>
    </u-popup>
  </s-layout>
  </template>
  
  <script setup>
  import { baseUrl } from '@/sheep/config';
  import codelogin from './code_login.vue'
  import accountLogin from './account_login.vue'
import { ref,reactive,computed } from 'vue';
import sheep from '@/sheep';
import mpAuthorization from './components/mp_authorization.vue';

const appInfo = computed(() => sheep.$store('app').info);

const state = reactive({
		protocol: false,
	});
  function closepop(e){
    popupshow.value = e
  }
  // 推荐选项
const subTypes = ref([
  {
    'name':'验证码登录',
    'value':'1',
  },
  {
    'name':'密码登录',
    'value':'2',
  }

])
// 高亮的下标
const activeIndex = ref(0)
const popupshow = ref(false)
// 查看协议
function onProtocol(id, title) {
		sheep.$router.go('/pages/public/richtext', {
			id,
			title,
		});
	}

	//勾选协议
	function onChange() {
		state.protocol = !state.protocol;
	}
  const currentProtocol = ref(false);
  	// 点击登录/注册事件
	function onConfirm(e) {
		currentProtocol.value = e;
		setTimeout(() => {
			currentProtocol.value = false;
		}, 1000);
	}
// 第三方授权登陆
const thirdLogin = async (provider) => {
if (!state.protocol) {
			// TODO：协议div晃动效果s
			currentProtocol.value = true;
			setTimeout(() => {
				currentProtocol.value = false;
			}, 1000);
			sheep.$helper.toast('请勾选相关协议');
			return;
		}
const loginRes = await sheep.$platform.useProvider(provider).login();
if (loginRes) {
  popupshow.value = false
  const userInfo = await sheep.$store('user').getInfo();
 
  // 触发小程序授权信息弹框
  // #ifdef MP-WEIXIN
  if (userInfo.third_oauth.length > 0) {
  	const mpThirdOauthInfo = userInfo.third_oauth.find((item) => item.platform === 'miniProgram');
  	if (mpThirdOauthInfo && !mpThirdOauthInfo.nickname) {
  		// showAuthModal('mpAuthorization');
      popupshow.value = true

  	}
  }
  // #endif
}
};
  </script>
  <style lang="scss">
 @import '../auth/components/login.scss';

 
  #app{
    .form-box {justify-content: space-around;

    }
  }
 .agreement{
  margin: 120rpx 0 30rpx 0;
 }

  </style>